// TagsInput.vue
<template>
  <div class="multi-tags home" @click='focus'>
    <el-tag size="mini" style="margin-right: 5px;margin-bottom: 5px;"
            v-for="tag in value"
            :key="tag.id"
            closable
            @close="delTag(tag)"
    >{{tag.name}}
    </el-tag>

    <input type="text"
           ref='input'
           @keyup.enter="add"
           @keydown.delete="del"
           @keydown.188='split'
           v-model='current'>
    <el-popover placement="bottom" width="400" trigger="click">
      <el-row :gutter="20" :key="group.id" v-for="group in tagGroups">
        <el-col :span="8">
          <el-button type="primary" size="small">
            {{group.groupName}}
          </el-button>
        </el-col>
        <el-col :span="16">
          <el-tag class="item" size="small" style="cursor:pointer;" :key="tag.id" v-for="tag in group.tagList" @click="tagClick(tag)">{{tag.name}}</el-tag>
          <el-input v-model="input" placeholder="请输入内容" label="aaaaa" size="mini" prefix-icon="el-icon-plus" class="tag-input"></el-input>
        </el-col>
      </el-row>
      <el-button icon="el-icon-plus" size="mini" slot="reference">{{placeholder}}</el-button>
    </el-popover>
  </div>
</template>

<script>
import {listTag,addTag,delTag} from "@/api/wework/tag"
export default {
  name: "TagsInput",
  props: {
    value: Array,
    required: true,
    placeholder:String,
    default: () => []
  },
  data () {
    return {
      current: '',
      input:'',
      tagGroups:[],
    }
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询标签组 */
    getList() {
      // this.loading = true;
      listTag(this.queryParams).then(response => {
        this.tagGroups = response.data;
        this.total = response.total;
        this.loading = false;
      });
    },
    tagClick(tag){
      console.log(tag)
      if (this.value.indexOf(tag) > -1) return
      this.value.push(tag)
    },
    focus () {
      this.$refs.input.focus()
    },
    split (e) {
      e.preventDefault()
      this.add(e)
    },
    add (e) {
      const val = e.target.value
      if (!val) return
      if (this.tags.indexOf(val) > -1) return
      this.tags.push(val)
      this.$emit('input', this.tags)
      this.current = ''
    },
    del (e) {
      if (!e.target.value.length) {
        this.tags.pop()
        this.$emit('input', this.tags)
      }
    },
    delTag (index) {
      this.tags.splice(index, 1)
      this.$emit('input', this.tags)
    }
  },
  computed: {
    tags () {
      return this.value.slice()
    }
  },
}
</script>

<style lang='scss' scoped>
.multi-tags{
  padding: 5px 10px;
  display: block;
  border: 1px solid #ccc;
  input{
    background: transparent;
  }
  .btn{
    margin: 0 5px 3px 0;
    padding: 4px 5px;
    background: #fff;
    border: 1px solid #eee;
    box-shadow:  0 0 4px;
  }
}
.tag-input{
  width: 80px;
}
.home {
  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;
  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }
  .item {
    cursor:pointer;
    margin-top: 10px;
    margin-right: 40px;
    margin-left: 60px;
  }
  .el-tag + .el-tag {
    margin-right: 30px;
  }

  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
}
</style>
